<template>
    <div  class="div-con">
        <!-- <h1>数据报表</h1> -->
    <!-- <el-space direction="vertical"> -->
        
    <el-row :gutter="50">
      <el-col :span="12" >
        <el-card class="box-card"  :body-style="{ padding: '0px' }">
            <template #header>
            <div class="card-header">
            <el-text>业绩情况汇总</el-text>
            <el-row style="float: right;">
                <el-date-picker
                v-model="value1"
                type="date"
                :size="size"
             />
            </el-row>
            </div>
        </template>
            <div class="schart-box">
			<schart class="schart" canvasId="bar" :options="options1"></schart>
		</div>
        </el-card>
    </el-col>
  
      <el-col :span="12" >
        <el-card class="box-card"  :body-style="{ padding: '0px' }">
            <template #header>
            <div class="card-header">
            <el-text>业绩情况汇总</el-text>
            <el-row style="float: right;">
                <el-date-picker
                v-model="value2"
                type="date"
                :size="size"
             />
            </el-row>
            </div>
            </template>
            <div class="schart-box">
			<schart class="schart" canvasId="ring" :options="options4"></schart>
		    </div>
        </el-card>
    </el-col>
    </el-row>
    <el-row :gutter="50" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card class="box-card"  :body-style="{ padding: '0px' }">
            <template #header>
            <div class="card-header">
            <el-text>客户量情况</el-text>
            <el-row style="float: right;">
                <el-date-picker
                v-model="value3"
                type="date"
             />
            </el-row>
            </div>
            </template>
            <div class="schart-box">
			<!-- <div class="content-title">饼状图</div> -->
			<schart class="schart" canvasId="pie" :options="options3"></schart>
		</div>
        </el-card>
    </el-col>
      <el-col :span="12">
        <el-card class="box-card"
        :body-style="{ padding: '0px' }">
            <template #header>
            <div class="card-header">
            <el-text>视频播放量</el-text>
            <el-row style="float: right;">
                <el-date-picker
                v-model="value4"
                type="date"
             />
            </el-row>
            </div>
            </template>
            <div class="schart-box">
			<!-- <div class="content-title">折线图</div> -->
			<schart class="schart" canvasId="line" :options="options2"></schart>
		</div>
        </el-card>
    </el-col>
    </el-row>
    <!-- </el-space> -->
</div>
</template>

<script setup>
import  {ref} from 'vue'
import Schart from 'vue-schart';
//根据时间查询数据
const value1= ref('')
const value2= ref('')
const value3= ref('')
const value4= ref('')
//每个时间组件上 绑定时间 自己实现和添加

const options1 = {
	type: 'bar',
	// title: {
	// 	text: '业绩情况汇总'
	// },
	bgColor: '#fbfbfb',
	labels: ['订单总金额', '贷款总金额', '预付总金额'],
	datasets: [
		{
			label: '业绩',
			// fillColor: 'rgba(241, 49, 74, 0.5)',
			data: [100, 200, 30]
		},
	]
};
const options2 = {
	type: 'line',
	// title: {
	// 	text: '最近几个月各品类销售趋势图'
	// },
	bgColor: '#fbfbfb',
	labels: ['java基础', 'mysql数据库', 'javaWeb', 'Thymeleaf', 'redis'],
	datasets: [
		{
			label: 'java基础',
			data: [120, 132, 101, 134, 90, 230, 210]
		},
		{
			label: 'mysql数据库',
			data: [220, 182, 191, 234, 290, 330, 310]
		},
		{
			label: 'javaWeb',
			data: [150, 232, 201, 154, 190, 330, 410]
		},
        {
            label: 'Thymeleaf',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            label: 'redis',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
	]
};
const options3 = {
	type: 'pie',
	// title: {
	// 	text: '服装品类销售饼状图'
	// },
	legend: {
		position: 'left'
	},
	bgColor: '#fbfbfb',
	labels: ['潜在客户', '邀约一面客户', '邀约失败客户', '一面可跟进客户', '二面可跟进客户', '丢单', '签约成功'],
	datasets: [
		{
			data: [335,310,234,135,1548,1548,1548]
		}
	]
};
const options4 = {
	type: 'ring',
	// title: {
	// 	text: '客户来源'
	// },
	showValue: true,
	legend: {
		position: 'top',
		bottom: 40
	},
	bgColor: '#fbfbfb',
	labels: ['前程无忧', '智联招聘',],
	datasets: [
		{
			data: [500, 500]
		}
	]
};
</script >
<style lang="less" scoped>
.schart-box {
	display: inline-block;
	margin: 20px 20px;
}
.schart {
	width: 558px;
	height: 300px;
}
.box-card{
    padding-left: 5%;
}
.card-header{
    font-size: 14px;
    font-weight: 800;
    color: #676a6c;
}
.div-con{
    margin: 20px 20px;
}

</style>